<template>
  <div>
    <el-tabs v-model="activeName" @tab-click="handleClick">
      <el-tab-pane
        v-for="(label, key) in data.tabConfig"
        :key="key"
        :label="label"
        :name="key"
      ></el-tab-pane>
    </el-tabs>
    <component :is="data.component[componentName]"></component>
  </div>
</template>

<script setup>
import { ref, reactive, markRaw, watch } from "vue";
import usb from "./components/usb.vue";
import network from "./components/network.vue";
import other from "./components/other.vue";
import secureUsb from "./components/secureUsb.vue";
import protectionSet from "./components/protectionSet.vue";
import { useTreeStore } from "~/utils/pinia/tree.js";
const treeStore = useTreeStore();
// treeStore.openTree();
const activeName = ref("usb");
const componentName = ref("usb");
const data = reactive({
  tabConfig: {
    usb: "漏洞列表",
    // network: "网卡",
    // printer: "打印机",
    // secureUsb: "安全U盘",
    // protectionSet: "防护设置",
    // other: "其他外设",
  },
  component: {
    usb: markRaw(usb),
    network: markRaw(network),
    other: markRaw(other),
    protectionSet: markRaw(protectionSet),
  },
});
watch(
  () => treeStore.osType,
  (osType) => {
    if (osType == "linux") {
      delete data.tabConfig.other;
    } else {
      data.tabConfig["other"] = "其他外设";
    }
    activeName.value = "usb";
    componentName.value = "usb";
  }
);

const handleClick = (tab, event) => {
  componentName.value = tab.props.name;
};
</script>

<style lang="scss" scoped></style>
